<template>
	<div>
		<div class="head">
			<a @click="getBack" class="return"></a>
			添加支付宝
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div style="padding: 20px 15px;">
					<van-field v-model="acc" placeholder="请输入帐号" label="帐号" maxlength="20" clearable />
					<div style="padding-top: 10px;font-size: 14px;">
						添加收款二维码
					</div>
					<div style="padding-top: 10px;">
						<van-uploader v-model="fileList" @delete="deleteImg" multiple accept="image/*" :max-count="1" :after-read="afterRead" :before-read="beforeRead" />
					</div>
					<van-progress v-if="percentageType == true" :percentage="percentage" color="#3fb776" style="margin-top: 10px;"/>
					<div style="padding-top: 30px;">
						<van-button size="normal" class="van-button--info" @click="addZFB" :loading="loading" :disabled="load" :text="ok"></van-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { otc } from './../utils/api';
	export default {
		data() {
			return {
				loading: false,
				acc: '',
				img: '', // picture
				fileList: [],
				load: true,
				ok: '保存',
				percentage: 0,
				percentageType: false
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
			beforeRead(file) {
				return new Promise((resolve, reject) => {
					if(file.type === 'image/jpeg' || file.type === 'image/png') {
						resolve();
					} else {
						this.$toast('请上传 jpg 或者 png 格式的图片!');
						reject();
					}
				});
			},
			deleteImg() { // 删除文件时触发
				this.ok = '保存';
				this.percentageType = false;
			},
			afterRead(file) {
				this.load = true;
				this.percentageType = true;
				this.ok = '正在上传中，请稍候';
				let param = new FormData();
				param.append('file', file.file, file.file.name);
				let config = {
					headers: {
						'Content-Type': 'multipart/form-data'
					},
					onUploadProgress: progressEvent => {
			            this.percentage = (progressEvent.loaded / progressEvent.total * 100 | 0);
			        }
				}; //添加请求头
				this.axios.post(process.env.API_HOST + 'upload/images', param, config).then(res => {
					if(res.data.code == 200){
						this.img = res.data.data[0].url;
						this.$toast('支付宝收款二维码上传成功');
						this.load = false;
					}else{
						this.$toast(res.msg);
					}
					this.ok = '保存';
					this.percentageType = false;
				}).catch(()=> {
					this.$toast("支付宝收款二维码上传失败");
				    this.ok = '保存';
				    this.percentageType = false;
				});
			},
			getBack() {
				if(this.$route.query.roid) {
					this.$router.push({
						path: '/Pay',
						query: {
							roid: this.$route.query.roid
						}
					})
				} else {
					this.$router.push({
						path: '/Pay'
					})
				}
			},
			addZFB() { // 添加支付宝
				if(!this.acc) {
					this.$toast('用户帐号不能为空');
					return false;
				}
				if(!this.img) {
					this.$toast('支付宝收款二维码不能为空');
					return false;
				}
				this.loading = true;
				otc.getUpload({
					"type": 2,
					"card": this.acc,
					"QRcode": this.img,
				}).then(res => {
					if(res.code == 200) {
						this.$toast('添加支付宝收款二维码成功');
						setTimeout(() => {
							if(this.$route.query.roid) {
								this.$router.push({
									path: '/Pay',
									query: {
										roid: this.$route.query.roid
									}
								})
							} else {
								this.$router.push({
									path: '/Pay'
								})
							}
						}, 500);
					} else {
						this.$toast(res.msg);
					}
					this.loading = false;
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .van-field__label {
		color: white;
		width: 60px;
	}
	
	/deep/ .van-cell {
		border-bottom: 1px solid #4c536a;
		padding: 10px 0px;
		padding-top: 15px;
	}
	
	/deep/ .van-cell:not(:last-child)::after {
		border: 0;
	}
	
	/deep/ .van-uploader__upload {
		background: transparent;
		width: 70px;
		height: 70px;
	}
	
	/deep/ .van-uploader__preview-image {
		width: 70px;
		height: 70px;
	}
	
	/deep/ .van-uploader__upload-icon {
		color: white;
	}
</style>